/* 
  目标：了解props.children可以是任意数据类型
  1. 基本值
  2. JSX
  3. 组件
  4. 函数
    4.1 React对JS没有什么限制，函数传参类似Vue中的作用域插槽

*/
import React from 'react';

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Hello>
          {/* 3. children可以是组件
          <HelloSon></HelloSon> */}

          {/* 4. children可以是函数 */}
          {(msg) => <b>{msg}</b>}
        </Hello>
      </div>
    );
  }
}

class Hello extends React.Component {
  // children是函数，函数传参模拟作用域插槽
  // 1. 声明变量
  state = {
    msg: '我是Hello',
  };
  render() {
    console.log(this.props, 'props');
    // 通过props.children获取
    return (
      <div>
        我是hello组件
        {this.props.children(this.state.msg)}
      </div>
    );
  }
}
